<!--
  工单管理编辑组件-开发中
 -->
<template>
  <div class="operation-edit">
    <Modal
      :title="title"
      v-model="dialogVisible"
      :width="modalWidth"
      scrollable
      class-name="darkDialog user-detailDialog"
      :style="{'min-width': '500px','max-width': '1200px'}">
      <Form
        :label-width="80"
        ref="operationEdit"
        :model="rowData"
        :key="editKey"
        :rules="rules">
        <Row>
          <Col
            v-for="(item, index) in editDataList"
            :key="index+'col'"
            :span="item.span"
            v-show="item.show">
            <FormItem
              :key="index+'-'+'item'"
              :label="item.label"
              :labelWidth="item.labelWidth"
              :prop="item.prop">
              <template v-if="item.type === 'input'">
                <Input
                  @on-change="getInputChange($event, item.prop)"
                  v-model='rowData[item.prop]'
                  :disabled="item.disabled"
                  :placeholder="item.placeholder || '请输入'" />
              </template>
              <!-- 下拉 -->
              <template v-if="item.type === 'select'">
                <Select
                  v-model="rowData[item.prop]"
                  @on-change="getSelectChange($event, item.prop)"
                  filterable
                  :disabled="item.disabled"
                  :placeholder="item.placeholder || '请选择'"
                  :style="{width: item.weidth || '100%'}">
                  <Option
                    v-for="ele in item.options"
                    :disabled="ele.disabled"
                    :value="ele[item.optionsKey[0]]"
                    :key="ele[item.optionsKey[0]]">{{ ele[item.optionsKey[1]] }}</Option>
                </Select>
              </template>
              <!-- 文本输入框 -->
              <template v-if="item.type === 'textarea'">
                <Input
                  type="textarea"
                  :rows="item.rows || 4"
                  @on-change="getTextareaChange($event, item.prop)"
                  :value="rowData[item.prop]"
                  v-model="rowData[item.prop]" />
              </template>
              <!-- 附件上传 -->
              <template v-if="item.type === 'upload'">
                <uploadModal :type="item.fileType" :imgLists="rowData[item.prop]" @uploadSuccess="fileUpload" />
              </template>
              <!-- 评价 -->
              <template v-if="item.type === 'rate'">
                <Rate show-text allow-half v-model="rowData[item.prop]" :disabled="item.disabled">
                  <span style="color: #f5a623">{{ `${rowData[item.prop]}${ item.unit || '分'}` }}</span>
                </Rate>
              </template>
              <!-- 树组件 -->
              <template v-if="item.type === 'tree'">
                <Treeselect
                  v-model="rowData[item.prop]"
                  :multiple="false"
                  :options="item.options"
                  @select="getTreeChange($event, item.prop)"
                  :disabled="item.disabled"
                  :clearable="false"
                  :loadOptions="loadOptions"
                  placeholder="请选择">
                  <label
                    slot="option-label"
                    slot-scope="{ node, shouldShowCount, count,countClassName, labelClassName }"
                    :class="labelClassName"
                    :title="node.label">{{ node.label }}</label>
                </Treeselect>
              </template>
            </FormItem>
          </Col>
        </Row>
      </Form>
      <!-- 按钮 -->
      <div slot="footer">
        <!-- 取消按钮 固定type: 'cancel' -->
        <Button
          v-for="(item, index) in buttonList"
          v-show="item.show"
          :disabled="item.disabled"
          :key="index+'btn'"
          :type="item.type"
          @click="onButtonClick(item.prop)">{{item.label}}</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  props: {
    // 标题
    title: {
      type: String,
      default: ''
    },
    // 模态框宽度
    modalWidth: {
      type: String | Number,
      default: 1000,
    },
    // 表配置数据
    editDataList: {
      type: Array,
      default: () => []
    },
    // 按钮配置数据
    buttonList: {
      type: Array,
      default: () => []
    },
    // 表单验证规则
    rules: {
      type: Object,
      default: () => ({})
    },
    // 当前行数据
    rowData: {
      type: Object,
      default: () => ({})
    }
  },
  components: {
    Treeselect: () => import("@riophae/vue-treeselect"),
    uploadModal: () => import("@/components/upload"),
    Treeselect: () => import("@riophae/vue-treeselect"),
  },
  data() {
    return {
      dialogVisible: false,
      editKey: 0,
      bAttachmentList: [],
      deleteIds: [],
    }
  },
  methods: {
    init() {
      this.editKey += (new Date())
      this.dialogVisible = !this.dialogVisible;
    },
    // 方法统一抛出 带type属性的对象，缺数据可自行加入
    getInputChange (val, prop) {
      this.$emit('onEditPageChange', {prop, value: val})
    },
    getSelectChange (val, prop) {
      console.log(val, prop)
      this.$emit('onEditPageChange', {prop, value: val})
    },
    getTextareaChange (val, prop) {
      // this.$emit('onEditPageChange', {prop, value: val})
    },
    getTreeChange(val, prop) {
      this.$emit('onEditPageChange', {prop, value: val})
    },
    /**
     * 按钮点击事件抛出
     */
    onButtonClick(type) {
      if (type === 'cancel') {
        this.init()
        return;
      };
      this.$refs['operationEdit'].validate((valid) => {
        if (valid) {
          this.$emit('onButtonClick', {type, info: this.rowData});
        }
      })
    },
    /**
     * 上传附件
     */
    fileUpload(data, deleteIds) {
      let bAttachmentList = [];
      data.forEach(item => {
        if (item.attachmentId) {
          bAttachmentList.push({
            attachmentName: item.imgName,
            url: item.url,
            attachmentId: item.attachmentId
          });
        } else {
          bAttachmentList.push({
            attachmentName: item.imgName,
            url: item.url
          });
        }
      });
      this.$emit('onEditPageChange', {prop: 'fileUpload', value: bAttachmentList, deleteIds})
    },
    /**
     * tree组件
     */
    loadOptions(val) {
      console.log(val)
      return val;
    },
  }
}
</script>
<style lang="less" scoped>

</style>
